import React, { Component } from 'react';

import { Container, Header, Title, Content, Button, Icon, List, ListItem, Text, Badge, Body, Right, Left, Card, CardItem } from 'native-base';
import { connect } from 'react-redux';
import { View, StyleSheet, Dimensions, Image, TouchableHighlight, Platform } from 'react-native';
import { NavigationActions } from 'react-navigation';

import StudentInfo from '../../db/student_table.js';
import MessageInfo from '../../db/course_message_table.js';

var MiPushModule = require('../../../MiPushModule');
import BDPlayerView from '../../modules/BDPlayer.js';

// import styles from './styles';
//模拟数据信息
var Info = [
    {
        title: '名字',
        name: '张三',
    },
    {
        title: '账号',
        name: 'zhangsan',
    },
    {
        title: '院系',
        name: 'XXX',
    }
];

//自定义列表样式
class InfoCelltmp extends Component {
    show(title) {
        alert(title);
    }
    render() {
        var data = this.props.info;
        var list = [];
        for (var i in data) {
            var item = (
                <View key={i} style={[styles.row, styles.list_item]}>
                    <Text style={StyleSheet.flatten(styles.list_item_title)}>
                        {data[i].title}
                        {data[i].desc}
                    </Text>
                    <Text style={StyleSheet.flatten(styles.list_item_name)}>{data[i].name}</Text>
                </View>
            );
            list.push(item);
        }
        return (
            <View>
                {list}
            </View>
        );
    }
}

class InfoCell extends Component {
    render() {
        let info = this.props.info;
        return (
            <List>
                <ListItem style={StyleSheet.flatten(styles.list_item)}>
                <Icon name="person" style={{ color: '#28AB91' }} />
                    <Body>
                        <Text style={{ paddingLeft: '10%', fontSize: 15, color: '#353535', }}>姓名</Text>
                    </Body>
                    <Text style={{ paddingLeft: '30%', width: '60%', fontSize: 15, color: '#353535', }}>{info ? info.realName : ''}</Text>
                </ListItem>
                <ListItem style={StyleSheet.flatten(styles.list_item2)}>
                <Icon name="at" style={{ color: '#62B1F6' }} />
                    <Body>
                        <Text style={{ paddingLeft: '10%', fontSize: 15, color: '#353535', }}>学号</Text>
                    </Body>
                    <Text style={{ paddingLeft: '30%', width: '60%', fontSize: 15, color: '#353535', }}>{info ? info.userName : ''}</Text>
                </ListItem>
            </List>
        );
    }
}


const { width, height } = Dimensions.get('window');
class tab_me extends Component {
    render() {
        const { navigate } = this.props.navigation;
        const { login_info } = this.props;
        console.log('TABME', login_info);
        return (
            <Container >
                <View style={StyleSheet.flatten(styles.view)}>
                    {/*<BDPlayerView source='http://119.97.166.135:80/data/userdata/vod/resource/201611/ssZz3tGx.mp4' style={{height:height/3, width:width}} />*/}
                    <InfoCell info={login_info}></InfoCell>
                    <List>
                        <ListItem onPress={() => { navigate('Icons') }} iconLeft style={StyleSheet.flatten(styles.ListItem2)} >
                            {/* <ListItem onPress={() => { navigate('SettIng') }} iconLeft style={StyleSheet.flatten(styles.ListItem2)} > */}
                            <Icon name="settings" style={{ color: '#D9534F' }} />
                            <Body>
                                <Text style={StyleSheet.flatten(styles.text_style)}>设置</Text>
                            </Body>
                            <Image style={StyleSheet.flatten(styles.backIcon)} source={require('../../images/back.png')} />
                        </ListItem>
                        <ListItem onPress={() => { navigate('HELP') }} iconLeft style={StyleSheet.flatten(styles.list_item)} >
                            <Icon name="help-circle" style={{ color: '#62B1F6' }} />
                            <Body>
                                <Text style={StyleSheet.flatten(styles.text_style)}>  帮助与反馈</Text>
                            </Body>
                            <Image style={StyleSheet.flatten(styles.backIcon)} source={require('../../images/back.png')} />
                        </ListItem>
                        <ListItem onPress={() => { navigate('AboutMOOC') }} iconLeft style={StyleSheet.flatten(styles.list_item2)}>
                            <Icon name="information-circle" style={{ color: '#F0AD4E' }} />
                            <Body>
                                <Text style={StyleSheet.flatten(styles.text_style)}> 关于MOOC</Text>
                            </Body>
                            <Image style={StyleSheet.flatten(styles.backIcon)} source={require('../../images/back.png')} />
                        </ListItem>
                    </List>

                    <Body>
                        <Button block style={StyleSheet.flatten(styles.button_default)}
                            onPress={() => {
                                if (Platform.OS === 'android') {
                                    this.onPressUnset();
                                }
                                let stu = new StudentInfo();
                                let mess = new MessageInfo();
                                mess.deleteCourseMessage();
                                stu.deleteStudentInfo();
                                navigate('Login');
                            }}><Text style={StyleSheet.flatten(styles.exittext)} >注销</Text>
                        </Button>
                    </Body>
                </View>
            </Container>

        );
    }
    onPressUnset() {
        const { login_info } = this.props;
        // console.log('login_info.userName我');
        //console.log(login_info.userName);
        MiPushModule.unsetUserAccount(login_info.userName);
    }
}
const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
    },
    list_item: {
        marginLeft: 0,
        backgroundColor: '#ffffff',
        height: 50,
        padding: 15,
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
        borderTopColor: "#cac0c0",
        // borderTopWidth: 0.5,
        //textAlign: 'justify',
        //fontFamily: '微软雅黑',
    },
    list_item2: {
        marginLeft: 0,
        backgroundColor: '#ffffff',
        height: 50,
        padding: 15,
        borderBottomWidth: 0.2,
        borderBottomColor: "#fff",
        // borderTopColor: "#cac0c0",
        // borderTopWidth: 0.5,
        //textAlign: 'justify',
        //fontFamily: '微软雅黑',
    },
    button_default: {
        marginTop: 30,
        width: width,
        backgroundColor: '#ffffff',
        alignSelf: 'center',
    },
    list_item_title: {
        flex: 2,
        fontSize: 13,
        marginLeft: 10,
        color: '#353535',
    },
    list_item_name: {
        marginRight: 25,
        fontSize: 13,
        color: '#353535',
    },
    view: {
        marginTop: 15,
    },
    ListItem: {
        marginRight: 0,
        marginLeft: 0,
        marginTop: 3,
        paddingBottom: 10,
        paddingLeft: 15,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
        // borderTopColor: "#cac0c0",
        // borderTopWidth: 0.5,

    },
    ListItem2: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginRight: 0,
        marginLeft: 0,
        marginTop: 10,
        paddingBottom: 10,
        paddingLeft: 15,
        backgroundColor: 'white',
        // borderBottomWidth: 0.5,
        borderBottomColor: "#cac0c0",
        borderTopColor: "#cac0c0",
        // borderTopWidth: 0.5,

    },
    text_style: {
        //fontFamily: '微软雅黑',
        fontSize: 13,
    },
    Icon: {
        width: 20,
        height: 20,
        marginLeft: 10,
    },
    backIcon: {
        width: 20,
        height: 20,
        // marginLeft:'63%',
        marginRight: '5%'
    },
    exit: {
        width: 400,
        height: 50,
        marginTop: 15,
        alignItems: 'center',
        borderBottomWidth: 0.5,
        borderBottomColor: "#cac0c0",
        borderTopColor: "#cac0c0",
        borderTopWidth: 0.5,
        backgroundColor: '#ffffff',
        //fontFamily: '微软雅黑',
        color: '#353535',
    },
    exittext: {
        alignItems: 'center',
        alignSelf: 'center',
        color: '#000000',
        textAlignVertical: 'center',
    }
});


function mapStateToProps(state) {
    return {
        login_info: state.login.login_info
    }
}

function mapDispatchToProps(dispatch) {
    return {
    }
}

const TabMe = connect(
    mapStateToProps,
    mapDispatchToProps
)(tab_me)

export default TabMe;